<template>
    <el-aside :width="isCollapse ? '60px' : '210px'">
        <el-menu router :unique-opened='true' :default-active="this.$route.meta.current" background-color="#fff" text-color="#17233D" :collapse="isCollapse" :collapse-transition="false">
            <template v-for="(menu, index) in menu">
                <el-submenu :key="menu.id" :index="menu.id" v-if="menu.data.length !== 0">
                    <template slot="title">
                        <i :class="menu.icon" class="menu_icon"></i>
                        <span slot="title" class="menu_title">{{ menu.title }}</span>
                    </template>
                    <template v-for="sed in menu.data">
                        <el-menu-item :key="sed.id" :index="'/' + sed.url">
                            <span slot="title" class="sed_name">{{ sed.title }}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item :key="menu.id" :index="'/' + menu.url" v-else>
                    <i :class="menu.icon" class="menu_icon"></i>
                    <span slot="title" class="menu_title">{{ menu.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-aside>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            isCollapse: false,
            menu: [],
            activePath:'',
        };
    },
    created() {
        const userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
        this.menu = userinfo.auth
        this.$bus.on("isOpenNav", (value) => {
            this.isCollapse = value;
        });
    },
    methods: {},
    watch: {

    },
};
</script>


<style scoped>
.el-aside {
    position: relative;
    transition: all 0.5s;
    overflow: hidden;
    background-color: #fff;
    overflow-y: auto;
    padding-top: 20px;
}
.el-aside::-webkit-scrollbar{
    display: none;
}
.menu_icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 14px;
}
.menu_icon1{
    background: url(../../assets/img/menu_icon_1a.svg);
}
.el-submenu.is-active .menu_icon1{
    background: url(../../assets/img/menu_icon_1b.svg);
}
.menu_icon2{
    background: url(../../assets/img/menu_icon_2a.svg);
}
.el-submenu.is-active .menu_icon2{
    background: url(../../assets/img/menu_icon_2b.svg);
}
.menu_icon3{
    background: url(../../assets/img/menu_icon_3a.svg);
}
.el-submenu.is-active .menu_icon3{
    background: url(../../assets/img/menu_icon_3b.svg);
}
.menu_icon4{
    background: url(../../assets/img/menu_icon_4a.svg);
}
.el-submenu.is-active .menu_icon4{
    background: url(../../assets/img/menu_icon_4b.svg);
}
.menu_icon5{
    background: url(../../assets/img/menu_icon_5a.svg);
}
.el-submenu.is-active .menu_icon5{
    background: url(../../assets/img/menu_icon_5b.svg);
}
.menu_icon6{
    background: url(../../assets/img/menu_icon_6a.svg);
}
.el-submenu.is-active .menu_icon6{
    background: url(../../assets/img/menu_icon_6b.svg);
}
.menu_icon7{
    background: url(../../assets/img/menu_icon_7a.svg);
}
.el-submenu.is-active .menu_icon7{
    background: url(../../assets/img/menu_icon_7b.svg);
}
.menu_icon8{
    background: url(../../assets/img/menu_icon_8a.svg);
}
.el-submenu.is-active .menu_icon8{
    background: url(../../assets/img/menu_icon_8b.svg);
}
.menu_icon9{
    background: url(../../assets/img/menu_icon_9a.svg);
}
.el-submenu.is-active .menu_icon9{
    background: url(../../assets/img/menu_icon_9b.svg);
}
.menu_icon10{
    background: url(../../assets/img/menu_icon_10a.svg);
}
.el-submenu.is-active .menu_icon10{
    background: url(../../assets/img/menu_icon_10b.svg);
}
.menu_icon11{
    background: url(../../assets/img/menu_icon_11a.svg);
}
.el-submenu.is-active .menu_icon11{
    background: url(../../assets/img/menu_icon_11b.svg);
}
.menu_icon12{
    background: url(../../assets/img/menu_icon_12a.svg);
}
.el-submenu.is-active .menu_icon12{
    background: url(../../assets/img/menu_icon_12b.svg);
}
.menu_icon13{
    background: url(../../assets/img/menu_icon_13a.svg);
}
.el-submenu.is-active .menu_icon13{
    background: url(../../assets/img/menu_icon_13b.svg);
}
.menu_icon14{
    background: url(../../assets/img/menu_icon_14a.svg);
}
.el-submenu.is-active .menu_icon14{
    background: url(../../assets/img/menu_icon_14b.svg);
}
.menu_icon15{
    background: url(../../assets/img/menu_icon_15a.svg);
}
.el-submenu.is-active .menu_icon15{
    background: url(../../assets/img/menu_icon_15b.svg);
}
.menu_icon16{
    background: url(../../assets/img/menu_icon_16b.svg);
}
.el-submenu.is-active .menu_icon16{
    background: url(../../assets/img/menu_icon_16a.svg);
}

.menu_title {
    font-size: 16px;
}
.el-menu {
    border-right: 0;
}
.el-menu-item {
    -webkit-transition: none;
    transition: none;
}

.el-submenu .el-menu-item {
    height: 48px;
    line-height: 48px;
    padding-left: 62px !important;
    padding-right: 0;
    min-width: auto;
}
.el-submenu .sed_name {
    font-size: 14px;
    color: #616c85;
}
.el-submenu.is-active .menu_title{
    font-weight: bold;
}
</style>

<style>
.el-submenu__title {
    /* padding: 0 18px !important; */
}
.el-submenu__title:focus,
.el-submenu__title:hover {
    background: #f6f8ff !important;
}
.el-menu-item.is-active,
.el-menu-item:focus,
.el-menu-item:hover {
    background-color: #f6f8ff !important;
    position: relative;
}
.el-menu-item.is-active ::after,
.el-menu-item:focus::after,
.el-menu-item:hover::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 48px;
    background: #4475FF;
    top: 0;
    right: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.el-menu-item.is-active .sed_name,
.el-menu-item:focus .sed_name,
.el-menu-item:hover .sed_name {
    color: #4475FF;
}
.el-submenu__icon-arrow:before {
    content: "\e790" !important;
    color: #616C85 !important;
}
</style>
